
<template>
    <transition name="van-slide-left">
        <div class="user">
            <div class="header">
                <div class="iconfont icon-fanhui" @click="back"></div>
                <van-tabs v-model="currentTab" class="tab" type="card" @change="handleTab">
                    <van-tab title="最近听的"></van-tab>
                    <van-tab title="我喜欢的"></van-tab>
                </van-tabs>
            </div>
            <div class="song-list" ref="scrollWrapper">
                <scroll :data="songList" v-if="songList.length">
                    <ul class="songs-wrapper">
                        <li class="item-song" v-for="(item,index) in songList" :key="item.id">
                            <p class="song-name">{{item.name}}</p>
                            <p class="singer">{{item.singer}}</p>
                        </li>
                    </ul>
                </scroll>
                <div v-else class="no-data">暂无数据</div>
            </div>
        </div>
    </transition>
</template>

<script>
import { Tab, Tabs } from 'vant'
import Scroll from 'components/scroll/scroll'
import { playerMixin } from 'common/js/mixin'
import {  getLoadedList } from 'common/js/cache'
export default {
    name: '',
    mixins: [playerMixin],
    data() {
        return {
            currentTab: 0,
            songList: []
        }
    },
    activated() {
        this.getLoadedList()
    },
    methods: {
        getLoadedList() {
            this.songList = getLoadedList()
        },
        getLikeList() {
            this.songList = []
        },
        handleTab(val) {
            if(val === 0) {
                this.getLoadedList()
            }else {
                this.getLikeList()
            }
        },
        back() {
            this.$router.back() 
        },
        handlePlaylist(list) {
            if(list.length) {
                this.$refs.scrollWrapper.style.bottom = `60px`
            }else{
                this.$refs.scrollWrapper.style.bottom = `0px`
            }
        }
    },
    components: {
        Scroll,
        [Tab.name]: Tab,
        [Tabs.name]: Tabs
    }
}
</script>

<style lang="less" scoped>
    .user{
        z-index: 99;
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        background: #fff;
        .header{
            position: relative;
            padding: 10px 0;
            .iconfont{
                position: absolute;
                left: 10px;
                top: 50%;
                transform: translate3d(0,-50%,0);
                padding: 3px;
                color: #d43c33;
            }
            .tab{
                width: 60%;
                margin: 0 auto;
            }
        }
        .song-list{
            overflow: hidden;
            position: absolute;
            top:50px;
            left: 0;
            right: 0;
            bottom: 0;
            .songs-wrapper{
                padding: 20px 20px 0 20px;
                background: #fff;
                .item-song{
                    padding-bottom: 15px;
                    .singer{
                        margin-top: 2px;
                        font-size: 12px;
                        color: #999;
                    }
                }
            }
            .no-data{
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate3d(-50%,-50%,0);
            }
        }
    }
</style>